<template>
	<view class="page-content">
		<view class="header">
			<view class="flex-col section_2">
				<view class="flex-row justify-between items-baseline group_4">
					<text class="font_2 text_2">空闲时间</text>
					<text class="text_3">{{ formdata.orderAcceptanceTime }}</text>
				</view>
				<view class="flex-row justify-between items-center group_5 mt-15">
					<text class="font_2">起步价（10公里内）</text>
					<text class="font_3 text_4">￥{{ formdata.startingPrice }}</text>
				</view>
				<view class="flex-row justify-between items-center group_5 mt-15">
					<text class="font_2">每公里（超出10公里）</text>
					<text class="font_3 text_4">￥{{ formdata.kilometerPrice }}</text>
				</view>
				<view class="flex-row items-center mt-15">
					<view class="flex-row items-center">
						<image class="shrink-0 image_5" src="/static/index/location2.png" />
						<text class="ml-4 font_4 text_5">{{ formdata.distance?formdata.distance.substr(0,4):'--' }}km</text>
					</view>
					<view class="ml-16 flex-row items-center">
						<image class="shrink-0 image_4" src="/static/index/animal.png" />
						<text class="ml-4 font_4 text_6">1只</text>
					</view>
				</view>
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="司机信息"></form-item-title>
			<view class="driver-msg">
				<view class="flex-row items-center">
					<view class="flex-row items-center">
						<u-image width="48rpx" height="48rpx" :src="formdata.driverPhoto" shape="circle" />
						<view style="font-weight: bold; font-size: 28rpx">{{
              formdata.name
            }}</view>
					</view>
					<view class="flex-row items-center" style="flex-wrap: wrap; flex: 1; gap: 10rpx">
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4"
							:text="formdata.drivingExperience + '年驾龄'"></custom-tag>
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4" :text="formdata.age + '岁'"></custom-tag>
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4" :text="formdata.sex==0?'男':'女'"></custom-tag>
					</view>
				</view>
				<view class="car">
					<u-image width="190rpx" height="98rpx" :src="formdata.carPhoto" border-radius="8" />
					<view class="name">{{ formdata.carModel }}</view>
				</view>
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="备注"></form-item-title>
			<view class="beizhu-msg">
				{{ formdata.remark }}
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="路线预览"></form-item-title>
			<view class="map-box">
				<map style="width: 100%; height: 100%" :latitude="formdata.lng" :longitude="formdata.lat" />
			</view>
		</view>
		<view class="bottom-box flex-row items-center">
			<view class="left" @click="handleToChat(formdata.publisherId)"> 聊一聊 </view>
			<view class="right" @click="handleYuyue"> 预约用车 </view>
		</view>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import customTag from "components/common/custom-tag.vue";
	import petBasi from "../../../api/petBasi.js";
	export default {
		data() {
			return {
				formdata: {
					address: "",
					age: "",
					carModel: "",
					carPhoto: "",
					certificatePhoto: "",
					driverLicense: "",
					driverPhoto: "",
					drivingExperience: "",
					kilometerPrice: "",
					lat: 0,
					lng: 0,
					name: "",
					orderAcceptanceTime: "",
					phone: "",
					publisherId: "",
					remark: "",
					sex: "",
					startingPrice: "",
					type: "",
					distance: 0,
				},
				userinfo: undefined
			};
		},
		onLoad(option) {
			this.getDetail(option.id, option.distance);
			const userinfo = uni.getStorageSync("userinfo");
			if (userinfo) {
				this.userinfo = userinfo;
			}
		},
		methods: {
			getDetail(id, distance) {
				petBasi.getVehiclesById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data;
						this.formdata.distance = distance;
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			},
			handleYuyue() {
				petBasi.addGoApplay({
					userId: this.userinfo.id,
					eventId: this.formdata.id,
					type: 3
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})
					} else {
						throw Error(res.msg);
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		},
		components: {
			formItemTitle,
			customTag,
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #ffffff;
		height: 100%;
		overflow-y: auto;

		.header {
			border-bottom: solid 2rpx #f6f6f6;

			.mt-15 {
				margin-top: 30rpx;
			}

			.section_2 {
				padding: 40rpx 20rpx 44rpx 32rpx;
				background-color: #ffffff;

				.group_4 {
					padding-left: 12rpx;

					.text_2 {
						line-height: 29.66rpx;
					}

					.text_3 {
						color: #ff7676;
						font-size: 40rpx;
						font-family: D-DIN;
						line-height: 28.48rpx;
					}
				}

				.group_5 {
					padding: 0 8rpx;

					.font_3 {
						font-size: 32rpx;
						font-family: D-DIN;
						line-height: 23.96rpx;
						color: #333333;
					}

					.text_4 {
						margin-right: 8rpx;
					}
				}

				.font_2 {
					font-size: 32rpx;
					font-family: PingFang SC;
					line-height: 29.88rpx;
					color: #999999;
				}

				.image_5 {
					width: 26rpx;
					height: 26rpx;
				}

				.font_4 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 23.96rpx;
					color: #999999;
				}

				.text_5 {
					line-height: 17.8rpx;
				}

				.image_4 {
					width: 33.58rpx;
					height: 30.42rpx;
				}

				.text_6 {
					line-height: 20.76rpx;
				}
			}
		}

		.common-box {
			padding: 32rpx 38rpx;
			border-bottom: solid 2rpx #f6f6f6;

			.driver-msg {
				.car {
					padding-top: 32rpx;

					.name {
						margin-top: 24rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.beizhu-msg {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}

			.map-box {
				height: 312rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background-color: #000;
				overflow: hidden;
			}
		}

		.bottom-box {
			.left {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding: 42rpx 52rpx;
			}

			.right {
				width: 542rpx;
				height: 88rpx;
				background: #fcd610;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>